<template>
	<view :style="[elStyles, elBackground]">
		<slot />
	</view>
</template>

<script setup>
	/**
	 * 容器组件 - 装修组件的样式容器
	 */
	import { computed, provide, unref } from 'vue';

	import $url from '/shop/url/index.js';

	const props = defineProps({
		styles: {
			type: Object,
			default() {},
		},
	});

	// 单个组件样式
	const elBackground = computed(() => {
		if (props.styles) {
			if (props.styles.background.type == 'color')
				return {
					background: props.styles.background.bgColor,
				};
			if (props.styles.background.type == 'image')
				return {
					background: `url(${$url.cdn(
						props.styles.background.bgImage,
					)}) no-repeat top center / 100% auto`,
				};
		}
	});

	const elStyles = computed(() => {
		if (props.styles) {
			return {
				// 区分这种写法和+拼接区别....
				marginTop: `${props.styles.marginTop}px`,
				marginBottom: props.styles.marginBottom + 'px',
				marginLeft: `${props.styles.marginLeft}px`,
				marginRight: props.styles.marginRight + 'px',
				'border-top-left-radius': props.styles.borderRadiusTop + 'px',
				'border-top-right-radius': props.styles.borderRadiusTop + 'px',
				'border-bottom-left-radius': props.styles.borderRadiusBottom + 'px',
				'border-bottom-right-radius': props.styles.borderRadiusBottom + 'px',
				padding: props.styles.padding + 'px',
				overflow: 'hidden',
			};
		}
	});
</script>

<style lang="scss"></style>
